<!-- Dom模板 -->
<template>
  <div class="dingweibu">
    <!-- Dom内容 -->
    <p @click="guen" title="返回顶部"></p>
    <p title="购物车"></p>
    <p title="在线客服"></p>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    guen() {
      // console.log(document.documentElement.clientWidth)
      // document.documentElement.scrollTo(0,0)
      document.getElementsByClassName("container")[0].scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
/* @import url(''); 引入css类 */
.dingweibu {
  width: 60px;
  height: 250px;
  border-radius: 30px;
  background-image: url("../../public/images/ding.svg");
  position: fixed;
  right: 50px;
  bottom: 60px;
  background-repeat: no-repeat;
  overflow: hidden;
  p {
    height: calc(100% / 3);
  }
  p:hover {
    cursor: pointer;
  }
}
</style>